<template>
  <div class="my-heroe">
    <app-bar back title="招募武将">
      <p slot="right" @click="alert = true" class="zhaomu">完成</p>
    </app-bar>
    <div v-if="!alldataLoading">
      <div class="search">
        <div class="icon">
          <img src="../../assets/ss.svg" alt="" />
        </div>
        <input type="text" v-model="search" placeholder="请输入武将名称" />
        <div class="clear" v-if="search" @click="search = ''">
          <img src="../../assets/clear.svg" alt="" />
        </div>
      </div>
      <div class="country" v-if="!search">
        <div
          class="item"
          :class="{ active: country == 1 }"
          @click="setCountry(1)"
        >
          魏
        </div>
        <div
          class="item"
          :class="{ active: country == 2 }"
          @click="setCountry(2)"
        >
          蜀
        </div>
        <div
          class="item"
          :class="{ active: country == 3 }"
          @click="setCountry(3)"
        >
          吴
        </div>
        <div
          class="item"
          :class="{ active: country == 4 }"
          @click="setCountry(4)"
        >
          群
        </div>
      </div>
      <div class="quality" v-if="!search">
        <div class="tit">·名将（S）</div>
      </div>
      <div class="content" v-if="!search">
        <div
          class="item"
          v-for="(item, i) in S_heroesList"
          :key="i"
          @click="selectHeroes(item)"
        >
          <div class="img">
            <img :type="item.quality" :src="item.avatar" />
            <div
              class="radio"
              :class="{
                active: select.indexOf(item.id) !== -1,
              }"
            >
              <van-icon name="success" />
            </div>
          </div>
          <div class="name">{{ item.name }}</div>
        </div>
      </div>

      <div class="quality" v-if="!search">
        <div class="tit">·良将（A）</div>
        <div class="tips">
          <div class="radio">
            <van-icon name="success" />
          </div>
          默认全部已有
        </div>
      </div>
      <div class="content" v-if="!search">
        <div
          class="item"
          v-for="(item, i) in A_heroesList"
          :key="i"
          @click="selectHeroes(item)"
        >
          <div class="img">
            <img :type="item.quality" :src="item.avatar" />
            <div
              class="radio"
              :class="{
                active: select.indexOf(item.id) !== -1,
              }"
            >
              <van-icon name="success" />
            </div>
          </div>
          <div class="name">{{ item.name }}</div>
        </div>
      </div>

      <div class="quality" v-if="!search">
        <div class="tit">·裨将（B）</div>
        <div class="tips">
          <div class="radio">
            <van-icon name="success" />
          </div>
          默认全部已有
        </div>
      </div>
      <div class="content" v-if="!search">
        <div
          class="item"
          v-for="(item, i) in B_heroesList"
          :key="i"
          @click="selectHeroes(item)"
        >
          <div class="img">
            <img :type="item.quality" :src="item.avatar" />
            <div
              class="radio"
              :class="{
                active: select.indexOf(item.id) !== -1,
              }"
            >
              <van-icon name="success" />
            </div>
          </div>
          <div class="name">{{ item.name }}</div>
        </div>
      </div>

      <div class="quality" v-if="!search">
        <div class="tit">·偏将（C）</div>
        <div class="tips">
          <div class="radio">
            <van-icon name="success" />
          </div>
          默认全部已有
        </div>
      </div>
      <div class="content" v-if="!search">
        <div
          class="item"
          v-for="(item, i) in C_heroesList"
          :key="i"
          @click="selectHeroes(item)"
        >
          <div class="img">
            <img :type="item.quality" :src="item.avatar" />
            <div
              class="radio"
              :class="{
                active: select.indexOf(item.id) !== -1,
              }"
            >
              <van-icon name="success" />
            </div>
          </div>
          <div class="name">{{ item.name }}</div>
        </div>
      </div>

      <div class="content" v-if="search">
        <template v-for="(item, i) in heroesList">
          <div
            class="item"
            :key="i"
            v-if="item.name.indexOf(search) !== -1"
            @click="selectHeroes(item)"
          >
            <div class="img">
              <img :type="item.quality" :src="item.avatar" />
              <div
                class="radio"
                :class="{
                  active: select.indexOf(item.id) !== -1,
                }"
              >
                <van-icon name="success" />
              </div>
            </div>
            <div class="name" v-html="searchName(item.name)"></div>
          </div>
        </template>
      </div>
    </div>

    <div class="loading" v-else>
      <van-loading color="#1989fa" />
    </div>

    <van-overlay :show="alert" @click="alert = false">
      <div class="wrapper">
        <div class="block" @click.stop>
          <div class="cont">武将已修改，是否保存？</div>
          <div class="btns">
            <div class="item" @click="alert = false">取消</div>
            <div class="line"></div>
            <div class="item" @click="enter">保存</div>
          </div>
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "MyHeroe",
  computed: {
    ...mapState("data", ["heroesList", "userHeroes", "alldataLoading"]),
    S_heroesList() {
      let list = this.heroesList.filter(
        (item) =>
          item.quality == 4 &&
          (this.country == -1 || item.country == this.country)
      );
      return list;
    },
    A_heroesList() {
      let list = this.heroesList.filter(
        (item) =>
          item.quality == 3 &&
          (this.country == -1 || item.country == this.country)
      );
      return list;
    },
    B_heroesList() {
      let list = this.heroesList.filter(
        (item) =>
          item.quality == 2 &&
          (this.country == -1 || item.country == this.country)
      );
      return list;
    },
    C_heroesList() {
      let list = this.heroesList.filter(
        (item) =>
          item.quality == 1 &&
          (this.country == -1 || item.country == this.country)
      );
      return list;
    },
  },
  watch: {
    alldataLoading() {
      this.select = [...this.userHeroes];
    },
  },
  data() {
    return {
      alert: false,
      country: -1,
      search: "",
      select: [],
    };
  },
  activated() {
    window.shareData = null;
    window.injectedAll.shareInit();
  },
  created() {
    // 发送页面UV统计
    window.injectedAll.sendUv("三国志.战略版搭配");
    window.shareData = null;
    window.injectedAll.shareInit();
    this.select = [...this.userHeroes];
    let a = { ids: [], is: false };
    let b = { ids: [], is: false };
    let c = { ids: [], is: false };
    this.heroesList.forEach((item) => {
      if (item.quality === 3 && !a.is) {
        a.ids.push(item.id);
        if (this.select.indexOf(item.id) !== -1) a.is = true;
      } else if (item.quality === 2 && !b.is) {
        b.ids.push(item.id);
        if (this.select.indexOf(item.id) !== -1) b.is = true;
      } else if (item.quality === 1 && !c.is) {
        c.ids.push(item.id);
        if (this.select.indexOf(item.id) !== -1) c.is = true;
      }
    });
    if (!a.is) this.select.push(...a.ids);
    if (!b.is) this.select.push(...b.ids);
    if (!c.is) this.select.push(...c.ids);
  },
  methods: {
    setCountry(val) {
      if (this.country === val) this.country = -1;
      else this.country = val;
    },
    selectHeroes(heroes) {
      if (this.select.indexOf(heroes.id) === -1) {
        this.select.push(heroes.id);
      } else {
        this.select.splice(this.select.indexOf(heroes.id), 1);
      }
    },
    searchName(name) {
      var reg = new RegExp(this.search.trim(), "g");
      let _name = name.replace(reg, "<span>" + this.search.trim() + "</span>");
      return _name;
    },
    enter() {
      this.alert = false;
      this.$store.dispatch("data/updateUserHeroe", this.select);
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="scss" scoped>
.my-heroe {
  width: 100%;
  min-height: 100%;
  padding-top: 0.46rem;
  .zhaomu {
    position: absolute;
    top: 50%;
    right: 0.18rem;
    transform: translateY(-50%);
    height: 0.18rem;
    margin: 0;
    font-size: 14px;
    color: #ff8a69;
  }
  .search {
    margin: 0 0.15rem 0.15rem;
    height: 0.34rem;
    border-radius: 4px;
    border: 1px solid #ebebeb;
    display: flex;
    align-items: center;
    input {
      flex: 1;
      width: 0;
      border: none;
      font-size: 0.14rem;
      color: #233d4d;
      &::placeholder {
        font-size: 0.12rem;
        color: #cccccc;
      }
    }
    .icon {
      width: 0.34rem;
      height: 0.34rem;
      display: flex;
      align-items: center;
      justify-content: center;
      img {
        width: 0.24rem;
      }
    }
    .clear {
      width: 0.3rem;
      height: 0.34rem;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      img {
        width: 0.22rem;
      }
    }
  }
  .country {
    margin: 0 0.1rem 0.15rem;
    display: flex;
    .item {
      flex: 1;
      margin: 0 0.05rem;
      height: 0.28rem;
      border-radius: 0.05rem;
      background: #f2f2f2;
      border: 1px solid #f2f2f2;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 0.12rem;
      color: #333333;
      &.active {
        background: #fff;
        color: #ff8a69;
        border: 1px solid #ff8a69;
        background-image: url(../../assets/right_close.svg);
        background-repeat: no-repeat;
        background-position: right top;
      }
    }
  }
  .quality {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0.15rem 0.15rem;
    .tit {
      font-size: 0.14rem;
    }
    .tips {
      display: flex;
      align-items: center;
      font-size: 0.12rem;
      .radio {
        width: 0.14rem;
        height: 0.14rem;
        border: 1px solid #ffffff;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        background: #ff8a69;
        font-size: 0.08rem;
        margin-right: 0.04rem;
      }
    }
  }
  .content {
    padding: 0 0.1rem 0.15rem;
    .item {
      display: inline-block;
      width: calc(20% - 0.1rem);
      margin: 0 0.05rem 0.1rem;
      opacity: 1;
      .img {
        width: 100%;
        height: 0;
        padding-top: 100%;
        position: relative;
        .radio {
          position: absolute;
          width: 0.14rem;
          height: 0.14rem;
          background: rgba(35, 25, 22, 0.5);
          border: 1px solid #ffffff;
          top: 0.06rem;
          right: 0.06rem;
          border-radius: 50%;
          font-size: 0;
          display: flex;
          justify-content: center;
          align-items: center;
          color: #fff;
          &.active {
            background: #ff8a69;
            font-size: 0.08rem;
          }
        }
        img {
          position: absolute;
          top: 0;
          left: 0;
          width: calc(100% - 4px);
          height: calc(100% - 4px);
          border-radius: 0.04rem;
          &[type="4"] {
            border: 2px solid #f2ae32;
          }
          &[type="3"] {
            border: 2px solid #9363de;
          }
          &[type="2"] {
            border: 2px solid #7baefd;
          }
          &[type="1"] {
            border: 2px solid #99cfaa;
          }
        }
      }
      .name {
        margin-top: 0.06rem;
        text-align: center;
        font-size: 0.14rem;
        color: #333333;
        line-height: 0.2rem;
        white-space: nowrap;
        ::v-deep {
          span {
            color: #ff8a69;
          }
        }
      }
    }
  }
  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    .block {
      width: 2.7rem;
      background: #ffffff;
      border-radius: 0.08rem;
      font-size: 0.14rem;
      color: #333333;
      .cont {
        height: 0.89rem;
        border-bottom: 1px solid #eceff5;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .btns {
        display: flex;
        .item {
          height: 0.5rem;
          flex: 1;
          width: 0;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .line {
          height: 0.5rem;
          width: 1px;
          background: #eceff5;
        }
      }
    }
  }
}
</style>
